<template>
  <div class="mvfind">
    <van-nav-bar title="MV" left-arrow @click-left="$router.go(-1)" />
    <div class="video-box">
      <video
        class="mv"
        :src="mv"
        autoplay="autoplay"
        muted="muted"
        loop="loop"
        poster="media/mi9.jpg"
      ></video>
    </div>
    <div class="icon-infn">
      <van-icon name="like-o">{{ coList.commentCount }}</van-icon>
      <van-icon name="star-o">{{ coList.shareCount }}</van-icon>
      <van-icon name="fire-o">{{ coList.likedCount }}</van-icon>
    </div>
  </div>
</template>

<script>
import { mvAddress, commentMv } from './find'
import { mapState } from 'vuex'
export default {
  name: 'mvfind',
  data () {
    return {
      mv: [],
      coList: []
    }
  },
  computed: {
    ...mapState(['mvId'])
  },
  async created () {
    console.log(this.$route.query.id)
    let res = await mvAddress({ id: this.$route.query.id })
    console.log(res)
    this.mv = res.data.data.url
    console.log(this.mv)
    let resmv = await commentMv({ mvid: this.$route.query.id })
    console.log(resmv)
    this.coList = resmv.data
  }
}
</script>

<style scoped>
.mv {
  height: 100%;
  width: 100%;
}
.icon-infn {
  display: flex;
}
.icon-infn i {
  flex: 1;
  margin-top: 20px;
  margin-left: 30px;
  font-size: 14px;
}
</style>
